<template>
  <el-form ref="formRef" label-width="100px" size="mini">
    <el-form-item>
      <p>业务配置</p>
      <a @click="handleAdd">
        添加
      </a>
    </el-form-item>
    <div>
      <template v-for="(businessFormItem, index) in businessFormData">
        <div :key="index">
          <div class="title">
            {{ businessFormItem.name }}
          </div>
          <el-form-item required label="考核指标：">
            <AlarmCondit :value="businessFormItem" @change="(e) => handleAlarmChange(e, index)" />
          </el-form-item>
          <el-form-item label="关联指标：">
            <CheckBoxGroupView
              :value="businessFormItem.associatedBusinessKpiParams"
              :option-list="associatedBusinessKpiParamsList"
              :option-key="{key: 'id',value: 'name'}"
              @change="(e) => handleInput(e, 'associatedBusinessKpiParams', index)"
            />
          </el-form-item>
          <el-form-item required label="短信模板：">
            <SmsTemplate v-model="businessFormItem.warningSmsSettingParam" @change="(e) => handleInput(e, 'warningSmsSettingParam', index)" />
          </el-form-item>
          <el-form-item required label="销项模板：">
            <OutputTemplate v-model="businessFormItem.warningTaskSettingContent" @change="(e) => handleInput(e, 'warningTaskSettingContent', index)" />
          </el-form-item>
          <el-form-item required label="整改建议：">
            <ReformTemplate v-model="businessFormItem.warningImproveRecommendParam" @change="(e) => handleInput(e, 'warningImproveRecommendParam', index)" />
          </el-form-item>
        </div>
      </template>
    </div>
    <create-warn ref="CreateWarnRef" />
  </el-form>
</template>

<script>
import { mapState } from 'vuex'
import AlarmCondit from '../../AlarmCondit/index'
import CreateWarn from '../../CreateWarn/index'
import SmsTemplate from '../../SmsTemplate/index'
import OutputTemplate from '../../OutputTemplate/index'
import ReformTemplate from '../../ReformTemplate/index'
import CheckBoxGroupView from '@/components/CheckBoxGroupView/index'
import { msmRecordMap } from '@/config/dict'
import { isValid, isValidArray } from '@/utils'
export default {
  name: 'BusinessFormView',
  components: { AlarmCondit, CreateWarn, SmsTemplate, OutputTemplate, ReformTemplate, CheckBoxGroupView },
  computed: {
    ...mapState({
      businessFormData: state => state.businessFormData.businessForm.data || [],
      associatedBusinessKpiParamsList: state => state.businessFormData.basicForm.data.associatedBusinessKpiParams
    })

  },
  watch: {
    businessFormData: {
      handler: function(val) {
        this.checkStatus(val)
      },
      immediate: true
    }
  },
  methods: {
    checkStatus(data) {
      let status = true
      const errMsg = []
      if (!isValidArray(data)) {
        status = false
        errMsg.push('请添加业务预警配置')
      }
      data.forEach(item => {
        if (!isValid(item.name)) {
          status = false
          errMsg.push('请填写预警名称')
        }
        if (!isValid(item.level)) {
          status = false
          errMsg.push('请选择预警级别')
        }
        if (!isValidArray(item.warningConditionParam)) {
          status = false
          errMsg.push('请配置考核指标')
        }

        if (!isValid(item.warningSmsSettingParam) || !isValid(item.warningSmsSettingParam.id)) {
          status = false
          errMsg.push('请选择短信模板')
        }
        if (!isValid(item.warningTaskSettingContent)) {
          status = false
          errMsg.push('请配置销项模板')
        }
        if (
          !isValid(item.warningImproveRecommendParam) ||
          !isValid(item.warningImproveRecommendParam.title) ||
          !isValid(item.warningImproveRecommendParam.content)
        ) {
          status = false
          errMsg.push('请配置整改建议')
        }
      })

      const oldErrMsg = this.$store.state.businessFormData.businessForm.errMsg
      if (JSON.stringify(oldErrMsg) !== JSON.stringify(errMsg)) {
        this.$store.dispatch('businessFormData/setBusinessFormData', { status, errMsg })
      }
    },
    handleAdd() {
      this.$refs.CreateWarnRef.open().then(res => {
        res.associatedBusinessKpiParams = []
        const data = [...this.businessFormData, res]
        this.$store.dispatch('businessFormData/setBusinessFormData', { data })
      })
    },
    handleInput(e, type, index) {
      this.businessFormData[index][type] = e
      const current = { ...this.businessFormData[index], [type]: e }
      this.$set(this.businessFormData, index, current)
      this.$store.dispatch('businessFormData/setBusinessFormData', { data: this.businessFormData })
    },
    handleAlarmChange(e, index) {
      this.handleInput(e.conditionDesc, 'conditionDesc', index)
      this.handleInput(e.conditionType, 'conditionType', index)
      this.handleInput(e.warningConditionParam || [], 'warningConditionParam', index)
      this.handleInput(e.warningLevelChildParamList || [], 'warningLevelChildParamList', index)
    },
    parseChecked(checkList = [], current) {
      return checkList.includes(e => e === current)
    },
    formatLevel(key) {
      const current = msmRecordMap.find(e => e.key === key) || {}
      return current.value
    },

    getFormData() {
      return new Promise((resolve, reject) => {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            resolve(this.$data.formData)
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>

<style>

</style>
